<template>
  <div style="padding-left: 50px">
    <div class="linlsit">
      <div class="labname">
        <span>图例名称：</span>
      </div>
      <div class="labinput">
        <el-input
          v-model="form.legendName"
          placeholder="请输入图例名称"
          size="small"
          style="width: 100%!important;"
        ></el-input>
      </div>
    </div>
    <!-- <div class="linlsit">
      <div class="labname">
        <span>图例编号：</span>
      </div>
      <div class="labinput">
        <el-input
          v-model="form.legendCode"
          placeholder="请输入图例编号"
          size="small"
          style="width: 100%!important;"
        ></el-input>
      </div>
    </div>-->
    <div class="linlsit">
      <div class="labname">
        <span>图例类型：</span>
      </div>
      <div class="labiimg">
        <div
          :class="{ 'imgcine active': form.legendType === 'Basic', 'imgcine': form.legendType != 'Basic' }"
          @click="changeLegendType('Basic')"
        >
          <img src="../assets/img/基本.svg" alt />
          <span>基本</span>
        </div>
        <div
          :class="{ 'imgcine active': form.legendType === 'Single', 'imgcine': form.legendType != 'Single' }"
          @click="changeLegendType('Single')"
        >
          <img src="../assets/img/单值.svg" alt />
          <span>单值</span>
        </div>
        <div
          :class="{ 'imgcine active': form.legendType === 'Grading', 'imgcine': form.legendType != 'Grading' }"
          @click="changeLegendType('Grading')"
        >
          <img src="../assets/img/分级.svg" alt />
          <span>分级</span>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="linlsit" v-if="form.legendType === 'Basic'">
      <div class="labname">
        <span>统一设置：</span>
      </div>
      <div class="labinput">
        <span style="font-size: 10px;color: #b8b8b8">元素用统一样式</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Single'">
      <div class="labname">
        <span>单值设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px;color: #b8b8b8">分类字段不支持字段属性分类计数均相同的字段</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Grading'">
      <div class="labname">
        <span>分级设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px;color: #b8b8b8">分级仅支持字段类型为“浮点型、整型”的字段</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Single'">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 850px">
          分类字段：
          <el-select
            v-model="form.field"
            clearable
            filterable
            placeholder="图层字段"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
          >
            <el-option
              v-for="item in layerFieldList"
              :key="item.name"
              :label="item.value"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.valTableId"
            clearable
            filterable
            placeholder="关联表"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
            @change="getValTableFieldList"
          >
            <el-option
              v-for="item in tableList"
              :key="item.tableId"
              :label="item.tableName"
              :value="item.tableId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.valFieldId"
            clearable
            filterable
            placeholder="关联字段"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
          >
            <el-option
              v-for="item in valTableFieldList"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.tableId"
            clearable
            filterable
            placeholder="值表单"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
            @change="getTableFieldList"
          >
            <el-option
              v-for="item in tableList"
              :key="item.tableId"
              :label="item.tableName"
              :value="item.tableId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.fieldId"
            clearable
            filterable
            placeholder="值字段"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
            @change="getFieldPrivateList"
          >
            <el-option
              v-for="item in tableFieldList"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-button type="primary" size="small" style="margin-left: 10px" @click="addlist">添加字段值</el-button>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Grading'">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 850px">
          分类字段：
          <el-select
            v-model="form.field"
            clearable
            filterable
            placeholder="图层字段"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
          >
            <el-option
              v-for="item in layerFieldList"
              :key="item.name"
              :label="item.value"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.valTableId"
            clearable
            filterable
            placeholder="关联表"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
            @change="getValTableFieldList"
          >
            <el-option
              v-for="item in tableList"
              :key="item.tableId"
              :label="item.tableName"
              :value="item.tableId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.valFieldId"
            clearable
            filterable
            placeholder="关联字段"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
          >
            <el-option
              v-for="item in valTableFieldList"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.tableId"
            clearable
            filterable
            placeholder="值表单"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
            @change="getTableFieldList"
          >
            <el-option
              v-for="item in tableList"
              :key="item.tableId"
              :label="item.tableName"
              :value="item.tableId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.fieldId"
            clearable
            filterable
            placeholder="值字段"
            size="small"
            style="width: 12% !important;margin: 0 5px;"
            @change="getFieldPrivateList"
          >
            <el-option
              v-for="item in tableFieldList"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-button type="primary" size="small" style="margin-left: 10px" @click="addlist">添加分级区间</el-button>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Basic'">
      <div class="labname"></div>
      <div class="stylecontaine">
        <el-divider content-position="center" class="tiplin">样式设置</el-divider>
        <div class="stylerk">
          <div class="stylitem tinachon">
            <div>
              <span>填充颜色：</span>
            </div>
            <el-color-picker show-alpha v-model="form.legendSetting.fillColor" size="small"></el-color-picker>
          </div>
          <div class="stylitem">
            <span>轮廓颜色：</span>
            <el-color-picker show-alpha v-model="form.legendSetting.borderColor" size="small"></el-color-picker>
          </div>
          <div class="stylitem lunkuo">
            <span>轮廓宽度：</span>
            <el-input
              v-model="form.legendSetting.borderWidth"
              placeholder="px"
              size="small"
              style="width: 40%!important;"
            ></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Single'">
      <div class="labname"></div>
      <div class="forcntaine">
        <div class="listeinr">
          <span style="margin-bottom: 10px;margin-top: -5px">字段值</span>
          <div
            v-for="(item, index) in form.legendSetting.valueList"
            style="margin-bottom:11px"
            :key="index"
          >
            <i
              class="el-icon-delete"
              v-if="form.legendSetting.valueList.length > 1"
              @click="removeDomain(item)"
            ></i>
            <!-- <el-input
              v-model="item.value"
              placeholder="字段值"
              size="small"
              style="width: 60%!important;margin-left: 12%"
            ></el-input>-->

            <el-select
              v-model="item.value"
              clearable
              filterable
              placeholder="字段值"
              size="small"
              style="width: 60% !important;margin-left: 12%"
            >
              <el-option
                v-for="(v, i) in fieldPrivateList"
                :key="i"
                :label="v.dictName"
                :value="v.dictId"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="stylecontaine">
          <el-divider content-position="center" class="tiplin">样式设置</el-divider>
          <div v-for="(item, index) in form.legendSetting.valueList" :key="index">
            <div class="stylerk">
              <div class="stylitem tinachon">
                <div>
                  <span>填充颜色：</span>
                </div>
                <el-color-picker show-alpha v-model="item.fillColor" size="small"></el-color-picker>
              </div>
              <div class="stylitem">
                <span>轮廓颜色：</span>
                <el-color-picker show-alpha v-model="item.borderColor" size="small"></el-color-picker>
              </div>
              <div class="stylitem lunkuo">
                <span>轮廓宽度：</span>
                <el-input
                  v-model="item.borderWidth"
                  placeholder="px"
                  size="small"
                  style="width: 40%!important;"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Grading'">
      <div class="labname"></div>
      <div class="forcntaine">
        <div class="listeinr" style="margin-right: 30px">
          <span style="margin-bottom: 10px;margin-top: -5px">分级区间</span>
          <div
            v-for="(item, index) in form.legendSetting.valueList"
            style="margin-bottom:11px"
            :key="index"
          >
            <div style="display: flex;align-items: center">
              <i
                class="el-icon-delete"
                v-if="form.legendSetting.valueList.length > 1"
                @click="removeDomain(item)"
              ></i>
              <!-- <el-select v-model="item.operator1" placeholder="区间" size="small" style="width: 20%!important;">
              <el-option label="<" :value="3"></el-option>
              <el-option label="<=" :value="4"></el-option>
              <el-option label=">" :value="5"></el-option>
              <el-option label=">=" :value="6"></el-option>
              </el-select>-->
              <el-input
                v-model="item.valueLow"
                type="number"
                placeholder=">"
                size="small"
                style="width: 40%!important;margin-right:2%"
              ></el-input>~
              <!-- <el-select v-model="item.operator2" placeholder="区间" size="small" style="width: 20%!important;">
                <el-option label="<" :value="3"></el-option>
                <el-option label="<=" :value="4"></el-option>
                <el-option label=">" :value="5"></el-option>
                <el-option label=">=" :value="6"></el-option>
              </el-select>-->
              <el-input
                v-model="item.valueHigh"
                @input="form.legendSetting.valueList[index + 1] && (form.legendSetting.valueList[index + 1].valueLow = item.valueHigh)"
                type="number"
                placeholder="<="
                size="small"
                style="width: 40%!important;"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="stylecontaine">
          <el-divider content-position="center" class="tiplin">样式设置</el-divider>
          <div v-for="(item, index) in form.legendSetting.valueList" :key="index">
            <div class="stylerk">
              <div class="stylitem tinachon">
                <div>
                  <span>填充颜色：</span>
                </div>
                <el-color-picker show-alpha v-model="item.fillColor" size="small"></el-color-picker>
              </div>
              <div class="stylitem">
                <span>轮廓颜色：</span>
                <el-color-picker show-alpha v-model="item.borderColor" size="small"></el-color-picker>
              </div>
              <div class="stylitem lunkuo">
                <span>轮廓宽度：</span>
                <el-input
                  v-model="item.borderWidth"
                  placeholder="px"
                  size="small"
                  style="width: 40%!important;"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="linlsit">
      <div class="labname">
        <span>标注设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px;color: #b8b8b8">面中心点显示标注设置，如面上显示“面积、类型”等标注</span>
      </div>
    </div>

    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示字段：
          <el-select
            v-model="form.calloutSetting.field"
            clearable
            filterable
            placeholder="请选择"
            size="small"
            style="width: 50% !important;"
          >
            <el-option
              v-for="item in layerFieldList"
              :key="item.name"
              :label="item.value"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示颜色：
          <el-color-picker show-alpha v-model="form.calloutSetting.color" size="small"></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示字体：
          <el-select
            v-model="form.calloutSetting.fontFamily"
            clearable
            filterable
            placeholder="请选择"
            size="small"
            style="width: 50% !important;"
          >
            <el-option v-for="item in fontFamilyList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          字体大小：
          <el-input
            v-model="form.calloutSetting.fontSize"
            placeholder="px"
            size="small"
            style="width: 40%!important;"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示类型：
          <el-select v-model="form.calloutSetting.type" placeholder="显示类型" size="small">
            <el-option label="标牌" value="label"></el-option>
            <el-option label="文字" value="text"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          背景颜色：
          <el-color-picker show-alpha v-model="form.calloutSetting.bgColor" size="small"></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          轮廓颜色：
          <el-color-picker show-alpha v-model="form.calloutSetting.borderColor" size="small"></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          轮廓宽度：
          <el-input
            v-model="form.calloutSetting.borderWidth"
            placeholder="px"
            size="small"
            style="width: 40%!important;"
          ></el-input>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <el-button type="primary" size="samll" @click="onSubmit">保存</el-button>
  </div>
</template>

<script>
import { api } from "../server/api";
export default {
  name: "addMap",
  props: ['ruleForm'],
  data() {
    return {
      layerFieldList: [],

      tableList: [],

      tableFieldList: [],
      fieldPrivateList: [],

      valTableFieldList: [],


      lsylist: [],
      twolsylist: [],

      fontFamilyList: [
        '黑体',
        '宋体',
        '新宋体',
        '仿宋',
        '楷体',
        '仿宋_GB2312',
        '楷体_GB2312',
        '微软雅黑体',
      ],
      form: {
        mapId: '',
        layerCode: '',
        legendName: '',
        // legendCode: '',
        legendType: 'Basic',
        field: '',
        tableId: '',
        fieldId: '',
        valTableId: '',
        valFieldId: '',
        legendSetting: {
          fillColor: '',
          borderColor: '',
          borderWidth: '',
          borderStyle: 'line',
        },
        calloutSetting: {
          field: '',
          color: '',
          fontFamily: '',
          fontSize: '',
          type: 'label',
          bgColor: '',
          borderColor: '',
          borderWidth: '',
        },
      },
      legendId: '',
    }
  },
  mounted() {

  },
  methods: {

    layerFields() {
      const par = {
        layerCode: this.ruleForm.layerEditCode
      }
      api.layerFields(par).then(res => {
        this.layerFieldList = res
        console.log('图层列表', JSON.parse(JSON.stringify(res)))
      })
    },
    getTableList() {
      api.stdstDataTableLst({}).then(res => {
        // this.tableList = res
        this.tableList = res.filter(v => v.tableType === 0)
        console.log('表列表', JSON.parse(JSON.stringify(res)))

        if (this.legendId) {
          this.getLegendDetail();
        }
      })
    },
    getTableFieldList() {
      if (+this.form.tableId) {
        let table = this.tableList.find(v => v.tableId == this.form.tableId)
        console.log('当前表', JSON.parse(JSON.stringify(table)))

        if (this.form.legendType === 'Single') {
          api.farmOtherMapLegendSigFlds({ tableId: this.form.tableId }).then(res => {
            this.tableFieldList = res;
            console.log('tableFieldList', JSON.parse(JSON.stringify(res)))
          }).catch(err => {
            this.tableFieldList = [];
            this.form.fieldId = '';
          })
        } else if (this.form.legendType === 'Grading') {

          api.farmOtherMapLegendRangeFlds({ tableId: this.form.tableId }).then(res => {
            this.tableFieldList = res;
            console.log('rangetableFieldList', JSON.parse(JSON.stringify(res)))
          }).catch(err => {
            this.tableFieldList = [];
            this.form.fieldId = '';
          })
        }

      } else {
        this.tableFieldList = [];
        this.form.fieldId = '';
        this.fieldPrivateList = [];
      }
    },
    getValTableFieldList() {
      if (+this.form.valTableId) {
        let table = this.tableList.find(v => v.tableId == this.form.valTableId)
        console.log('当前val表', table)

        if (this.form.legendType === 'Single') {
          api.farmOtherMapLegendSigFlds({ tableId: this.form.valTableId }).then(res => {
            this.valTableFieldList = res;
            console.log('valTableFieldList', JSON.parse(JSON.stringify(res)))
          }).catch(err => {
            this.valTableFieldList = [];
            this.form.valFieldId = '';
          })
        } else if (this.form.legendType === 'Grading') {

          api.farmOtherMapLegendRangeFlds({ tableId: this.form.valTableId }).then(res => {
            this.valTableFieldList = res;
            console.log('rangetableFieldList', JSON.parse(JSON.stringify(res)))
          }).catch(err => {
            this.valTableFieldList = [];
            this.form.valFieldId = '';
          })
        }
      } else {
        this.valTableFieldList = [];
        this.form.valFieldId = '';
      }
    },
    getFieldPrivateList() {
        this.fieldPrivateList = [];
      if (!this.form.fieldId) {
        return;
      }
      let field = this.tableFieldList.find(v => v.fieldId == this.form.fieldId)
      console.log('值字段', JSON.parse(JSON.stringify(field)))
      if (field) {
        if (field.privateInfo) {
          let privateInfo = JSON.parse(field.privateInfo)

          if(this.form.legendType === 'Single') {
            if (privateInfo.dictTblId) {
              //获取表内容
              api.dictList({ tableId: privateInfo.dictTblId }).then(res => {
                console.log('字段值列表', res)
                this.fieldPrivateList = res;
              })
            } else if (privateInfo.valList && privateInfo.valList.length) {
              console.log('字段值列表', privateInfo.valList)
              this.fieldPrivateList = privateInfo.valList.map((v, i) => {
                return {
                  dictId: i,
                  dictName: v
                }
              });
            }
          } else if(this.form.legendType === 'Grading') {
            if(privateInfo.maximum) {
              let item = this.form.legendSetting.valueList && this.form.legendSetting.valueList[0];
              if(item && !item.valueHigh) {
                item.valueHigh = privateInfo.maximum
                item.valueLow = privateInfo.minimum
              }

            }


          }



        } else {
          this.$message('值字段privateInfo为空')
        }


      } else {
        this.fieldPrivateList = [];
      }
    },
    gedyaje(mapId, legendId) {
      if (legendId) {
        this.legendId = legendId;
      }
      this.form.mapId = mapId
      this.form.layerCode = this.ruleForm.layerEditCode

      if (!this.form.mapId) {
        this.$message('地图Id缺失')
        return
      }
      if (!this.form.layerCode) {
        this.$message('地图未绑定图层')
        return
      }

      console.log('this.ruleForm', this.ruleForm)
      this.layerFields();
      this.getTableList();
    },
    getLegendDetail() {
      console.log('legendId', this.legendId)
      api.farmOtherMapLegendDetail({ legendId: this.legendId }).then(res => {

        console.log('legendDetail', JSON.parse(JSON.stringify(res)))
        let form = {
          legendId: res.legendId,
          mapId: res.mapId,
          layerCode: res.layerCode,
          legendName: res.legendName,
          legendType: ['Basic', 'Single', 'Grading'][res.legendType],

          field: res.field,
          tableId: res.tableId,
          fieldId: res.fieldId,
          valTableId: +res.valTableId,
          valFieldId: +res.valFieldId,
          legendSetting: {
            fillColor: '',
            borderColor: '',
            borderWidth: '',
            borderStyle: 'line',
          },
          calloutSetting: {
            field: '',
            color: '',
            fontFamily: '',
            fontSize: '',
            type: 'label',
            bgColor: '',
            borderColor: '',
            borderWidth: '',
          },

        };
        if (res.legendSetting) {
          form.legendSetting = JSON.parse(res.legendSetting)
        }
        if (res.legendConfig) {
          form.calloutSetting = JSON.parse(res.legendConfig)
        }
        this.form = form;

        this.getTableFieldList();
        this.getValTableFieldList();
        setTimeout(() => {
          this.getFieldPrivateList();
        }, 3000)

      }).catch(err => {

      })
    },
    changeLegendType(type) {
      console.log(type);

      this.form.tableId = '';
      this.form.fieldId = '';
      this.form.valTableId = '';
      this.form.valFieldId = '';


      this.form.legendType = type;
      if (type === 'Basic') { //基本
        this.form.legendSetting = {
          fillColor: '',
          borderColor: '',
          borderWidth: '',
          borderStyle: 'line',
        };
      } else if (type === 'Single') { //单值
        this.form.legendSetting = {
          field: '',
          valueList: [
            {
              value: '',
              fillColor: '',
              borderColor: '',
              borderWidth: '',
              borderStyle: 'line',
            }
          ],
        };
      } else if (type === 'Grading') { //分级
        this.form.legendSetting = {
          field: '',
          valueList: [
            {
              valueLow: '',
              valueHigh: '',
              fillColor: '',
              borderColor: '',
              borderWidth: '',
              borderStyle: 'line',
            }
          ],
        };
      }
    },
    removeDomain(item) {
      var index = this.form.legendSetting.valueList.indexOf(item)
      if (index !== -1) {
        this.form.legendSetting.valueList.splice(index, 1)
      }
    },
    addlist() {
      if (this.form.legendType === 'Single') {
        this.form.legendSetting.valueList.push({
          value: '',
          fillColor: '',
          borderColor: '',
          borderWidth: '',
          borderStyle: 'line',
        })
      } else if (this.form.legendType === 'Grading') { //分级
        let valueLow = this.form.legendSetting.valueList[this.form.legendSetting.valueList.length - 1].valueHigh || ''
        this.form.legendSetting.valueList.push({
          valueLow,
          valueHigh: '',
          fillColor: '',
          borderColor: '',
          borderWidth: '',
          borderStyle: 'line',
        })
      }
    },
    onSubmit() {
      let form = this.form;
      console.log('图例信息', JSON.parse(JSON.stringify(form)))

      let legendData = this.form;
      let calloutSetting = this.form.calloutSetting;
      let legendSetting = this.form.legendSetting;

      if (!legendData.legendName) {
        this.$message('请输入图例名称')
        return;
      }
      // if (!legendData.legendCode) {
      //   this.$message('请输入图例编号')
      //   return;
      // }
      if (!legendData.legendType) {
        this.$message('请选择图例类型')
        return;
      }

      if (legendData.legendType === 'Basic') {
        if (!legendSetting.fillColor) {
          this.$message('请选择填充颜色')
          return
        }
        if (!legendSetting.borderColor) {
          this.$message('请选择轮廓颜色')
          return
        }
        if (!legendSetting.borderWidth) {
          this.$message('请选择轮廓宽度')
          return
        }
      }
      if (legendData.legendType === 'Single' || legendData.legendType === 'Grading') {

        if (!legendData.field) {
          this.$message('请选择分类字段')
          return
        }
        if (!legendData.tableId) {
          this.$message('请选择关联表')
          return
        }
        if (!legendData.fieldId) {
          this.$message('请选择关联字段')
          return
        }
        if (!legendData.valTableId) {
          this.$message('请选择值表')
          return
        }
        if (!legendData.valFieldId) {
          this.$message('请选择值字段')
          return
        }

        if (legendData.legendType === 'Single') {
          if (legendData.legendSetting.valueList.some(v => v.value === '')) {
            this.$message('请补全字段值')
            return
          }
        }
        if (legendData.legendType === 'Grading') {
          if (legendData.legendSetting.valueList.some(v => v.valueLow === '' || !v.valueHigh === '')) {
            this.$message('请补全分级区间')
            return
          }
        }
      }


      if (calloutSetting.field) {
        //选择了标注字段
        if (!calloutSetting.color) {
          this.$message('请选择显示颜色')
          return
        }
        if (!calloutSetting.fontFamily) {
          this.$message('请选择字体')
          return
        }
        if (!calloutSetting.fontSize) {
          this.$message('请选择字体大小')
          return
        }
        if (!calloutSetting.type) {
          this.$message('请选择显示类型')
          return
        }
        if (calloutSetting.type === 'label') {

          // if (!calloutSetting.bgColor) {
          //   this.$message('请选择背景颜色')
          //   return
          // }
          // if (!calloutSetting.borderColor) {
          //   this.$message('请选择边框颜色')
          //   return
          // }
          // if (!calloutSetting.borderWidth) {
          //   this.$message('请选择边框宽度')
          //   return
          // }
        }
      }
      let valueLst = [];

      if (legendData.legendType === 'Basic') {
        valueLst = [{
            valConfig: JSON.stringify(legendSetting)
        }]
      } else if (legendData.legendType === 'Single') {
        legendSetting.valueList.forEach(v => {
          let item = this.fieldPrivateList.find(val => val.dictId == v.value)
          if(item) {
            v.valueName = item.dictName;
          }
        })
        valueLst = legendSetting.valueList.map(v => {
          return {
            value1: v.value,
            valConfig: JSON.stringify(v)
          }
        })
      } else if (legendData.legendType === 'Grading') {
        
        valueLst = legendSetting.valueList.map(v => {
          return {
            operator1:5,
            value1:v.valueLow,
            operator2:4,
            value2:v.valueHigh,
            valConfig:JSON.stringify(v)
          }
        })
      }


      let postData = {
        mapId: legendData.mapId,
        layerCode: legendData.layerCode,
        "legendName": legendData.legendName,
        // "legendCode": legendData.legendCode,  //图例名称 
        legendType: ['Basic', 'Single', 'Grading'].indexOf(legendData.legendType),
        field: legendData.field,
        tableId: +legendData.tableId || 0,
        fieldId: +legendData.fieldId || 0,
        valTableId: +legendData.valTableId || 0,
        valFieldId: +legendData.valFieldId || 0,
        valueLst,
        legendSetting: JSON.stringify(legendSetting),
        legendConfig: JSON.stringify(calloutSetting),
      };
      console.log('postData', postData)
      console.log('postData', JSON.stringify(postData))

      if (legendData.legendId) {
        postData.legendId = legendData.legendId;
        this.farmOtherMapLegendUpdate(postData);
      } else {
        this.farmOtherMapLegendAdd(postData)
      }


    },
    farmOtherMapLegendAdd(par) {
      api.farmOtherMapLegendAdd(par).then(res => {
        this.$message('操作成功');
        this.$emit('chanke')
      })
    },
    farmOtherMapLegendUpdate(par) {
      api.farmOtherMapLegendUpdate(par).then(res => {
        this.$message('操作成功');
        this.$emit('chanke')
      })
    },
  }
}
</script>

<style scoped>
.linlsit {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.labname {
  width: 90px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.labinput {
  width: 200px;
}

.labiimg {
  display: flex;
  align-items: center;
}

.imgcine {
  width: 60px;
  display: flex;
  flex-direction: column;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}

.active {
  color: rgba(42, 130, 228, 1);
}

.active img {
  border: 1px solid rgba(42, 130, 228, 1);
}

.stylecontaine {
  width: 400px;
  border-right: 1px solid #e0e3e7;
  border-left: 1px solid #e0e3e7;
}

.tiplin {
  margin-top: -0px;
}

.stylerk {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.stylitem {
  display: flex;
  align-items: center;
  font-size: 12px;
  width: 30%;
}

.tinachon {
  margin-left: -30px;
  height: 43px;
  display: flex;
  align-items: center;
  background-color: white;
}

.tinachon div {
  height: 32px;
  display: flex;
  background-color: white;
  align-items: center;
}

.lunkuo {
  margin-right: -40px;
  height: 43px;
  display: flex;
  align-items: center;
  background-color: white;
}
.forcntaine {
  display: flex;
  width: 800px;
}
.listeinr {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.listeinr .div {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>